<template>
  <div>
    <h2 style="text-align: center">大事提醒</h2>
    <table>
      <thead>
      <tr>
        <th data-campo='标题'>标题</th>
        <th data-campo='开始'>开始时间</th>
        <th data-campo='结束'>结束时间</th>
        <th data-campo='内容'>内容</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in config.data" :key="index">
        <td data-campo='标题'>{{ item[0] }}</td>
        <td data-campo='开始'>{{ formatDate(item[1]) }}</td>
        <td data-campo='结束'>{{ formatDate(item[2]) }}</td>
        <td data-campo='内容'>{{ item[3] }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import request from "@/util/request.js";
export default {
    data() {
        return {
            config: {
                header: ['标题', '开始', '结束', '内容'],
                data: [], // 用于绑定响应式属性的数据
                headerBGC: "rgba(255,255,255,0)",
                oddRowBGC: "rgba(255,255,255,0)",
                evenRowBGC: "rgba(255,255,255,0)",
                index: true,
                columnWidth: [20, 80, 80, 80],
                align: ['center'],
            }
        }
    },
    created() {
        this.getEventsAll()
    },
    methods: {
        getEventsAll() {
            request.get("/info_event/getAllList").then(res => {
                if (res.data.code === '200') {
                    // 假设 res.data.data 是一个数组，其中每个元素也是一个数组，对应一行的数据
                    const newData = res.data.data;
                    // 在数组开头插入新数据
                    this.config.data.unshift(...newData);
                }
            })
        },
        formatDate(dateString) {
            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}`;
        }
    }
}
</script>




<style scoped>
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300);
* { margin: 0; padding: 0; border: 0 none; position: relative; }
*, *:before, *:after { box-sizing: inherit; }
html {
    box-sizing: border-box;
    background: #0D757D;
    font-size: 1rem;
    color: #e6eff0;
    font-family: Roboto Slab;
}
h1 {
    font-weight: normal;
    font-variant: small-caps;
    text-align: center;
}
table {
    --bg: linear-gradient(45deg, #87CEFA 0%, #C0F0F1 20%, #A0E2EF 39%, #68B5EB 76%, #7CACD2 100%);
    background: var(--bg);
    table-layout: fixed;
    margin: 1rem auto;
    width: 98%;
    box-shadow: 0 0 4px 2px rgba(0,0,0,.4);
    border-collapse: collapse;
    border: 1px solid rgba(0,0,0,.5);
    border-top: 0 none;
    /* 添加滚动条样式 */
    scrollbar-color: rgba(147, 242, 243, 0.71) transparent;
}

table::-webkit-scrollbar {
    width: 20px;
}
table::-webkit-scrollbar-track {
    background: transparent; /* 设置滚动条轨道背景色 */
}
table::-webkit-scrollbar-thumb {
    background-color: rgba(147, 242, 243, 0.71);
    border-radius: 7px;
    border: 1px solid #aaa;
}

thead {
    --bg: linear-gradient(-45deg, #F7F1FF 0%, #E7FFEC 20%, #D1F9E7 39%, #BCD2E7 76%, #B8D0E5 100%);
    background: var(--bg);
    text-align: center;
    z-index: 2;
}

thead tr {
    padding-right: 17px;
    box-shadow: 0 4px 6px rgba(0,0,0,.6);
    z-index: 2;
}

th {
    border-right: 2px solid rgba(0,0,0,.2);
    padding: .7rem 0;
    font-size: 1.3rem;
    font-weight: normal;
    font-variant: small-caps;
    text-align: center;
}

tbody {
    display: block;
    height: calc(500px - 20px);
    min-height: calc(200px + 1px);
    overflow-y: scroll;
    color: #000;
}

tr {
    display: block;
    overflow: hidden;
}

tbody tr:nth-child(odd) {
    background: rgba(0,0,0,.2);
}

th, td {
    width: 25%;
    float: left;
    text-align: center;
    word-wrap: break-word;
}

td {
    padding: .5rem 0;
    border-right: 2px solid rgba(0,0,0,.2);
}

td:nth-child(2n) { color: #fff; }
[data-campo='标题'] {
    width: 30%;
}

[data-campo='内容'] {
    width: 40%;
}

[data-campo='开始'] {
    width: 15%;
}

[data-campo='结束'] {
    width: 15%;
}

@media only screen and (max-width: 1500px) {
    table {
        border-top: 1px solid ;
    }
    thead {display: none;}
    tbody {
        height: auto;
        max-height: 55vh;
    }
    tr {
      padding: 10px;
      border-bottom: 2px solid rgba(0, 0, 0, .35);
    }
    tbody tr:nth-child(odd) {
        --bg: linear-gradient(-45deg, #F7F1FF 0%, #E7FFEC 20%, #D1F9E7 39%, #BCD2E7 76%, #B8D0E5 100%);
        background: var(--bg);
    }
    tbody tr:nth-child(even) {
        --bg: linear-gradient(45deg, #87CEFA 0%, #C0F0F1 20%, #A0E2EF 39%, #68B5EB 76%, #7CACD2 100%);
        background: var(--bg);
    }
    td {
        display: block;
        width: 100%;
        min-width: 100%;
        word-wrap: break-word;
        padding: .4rem .5rem .4rem 15%;
        border-right: 0 none;
    }
    td:before {
        content: attr(data-campo);
        background: rgba(0,0,0,.1);
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: auto;
        min-width: 10%;
        font-family: monospace;
        text-align: center;
        font-size: 150%;
        font-variant: small-caps;
        line-height: 1.8;
    }
    tbody td:last-child {
        padding-left: 15%;
    }
    td:nth-child(even) {
        background: rgba(0,0,0,.2);
    }
}
a {color: #FF7361}
</style>
